<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./css/thought.css">
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"> 
    <title></title>
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
   

    <header>
        <nav id="cnav">
            <ul>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shoucang"></use>
                        </svg>
                    </a>
                </li>
        
                <li>
                    <a href="./thought.html">
                        
                            <p>
                                想法
                            </p>
                        
                    </a>
                </li>
                <li>
                    <a href="./home page.html">
                        
                            <p>推荐</p>
                       
                    </a>
                </li>
                <li>
                    <a href="./hot list.html">
                        
                            <p>
                                热榜
                            </p>
                        
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-lingdang"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <ul class="alist">
        </ul>
        <script>
            var url="http://rap2api.taobao.org/app/mock/308017/xxx"
            var xhr = new XMLHttpRequest();
    
                xhr.open("GET", url, true);
                xhr.send();
    
               xhr.onreadystatechange = function(){
               if (xhr.readyState === 4 && xhr.status === 200) {
                   var jarr=JSON.parse(xhr.responseText);
                   insert(jarr);/* 自定义函数 */
             }                
           }
           function insert(jarr){
            var alist=document.querySelector(".alist");
            jarr.forEach((v,i)=>{
                var nli=document.createElement("li");
            nli.innerHTML=`<img src="${v.pic}">
                <h3>${v.title}</h3>
                <p>${v.content}</p>`;
    
           alist.appendChild(nli);
            })
        }
        </script>
   


 
    
    <footer>
        <div id="bnav">
           
                <ul>
                    <li>
                        
                        <a href="./home page.html">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-shouye2"></use>
                                </svg>
                            </div>
                            <p>首页</p>
                        </a>
                    </li>
                    <li>
                        
                        <a href="./attention.html">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-guanzhu"></use>
                                </svg>
                            </div>
                            <p>关注</p>
                        </a>
                    </li>
                    <li>
                        
                        <a href="#">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-tianjia"></use>
                                </svg>
                            </div>
                           
                        </a>
                    </li>
                    <li>
                        
                        <a href="#">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-a-huiyuanVIP"></use>
                                </svg>
                            </div>
                            <p>会员</p>
                        </a>
                    </li>
                    <li>
                        
                        <a href="./my.html">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-wode1"></use>
                                </svg>
                            </div>
                            <p>我的</p>
                        </a>
                    </li>
                </ul>
              
            </nav>
                </footer>
                
                
    </body>
    <body>
        <ul class="jlist">
            
        </ul>
        <script>
            var jarr=[{
                img:"./img/1.jpg",
                link:"http://ltaaa.com",
                title:"落日",
                author:"薛一靓",
                time:"2022.11 18"
            },{
                img:"./img/5.jpg",
                link:"http://ltaaa.com",
                title:"轻纺",
                author:"薛一靓",
                time:"2022.11 18"
            },{
                img:"./img/4.jpg",
                link:"http://ltaaa.com",
                title:"爱情",
                author:"薛一靓",
                time:"2022.11 18"
            },{
                img:"./img/1.jpg",
                link:"http://ltaaa.com",
                title:"学习",
                author:"薛一靓",
                time:"2022.11 18"
            },{
                img:"./img/2.jpg",
                link:"http://ltaaa.com",
                title:"标题5",
                author:"薛一靓",
                time:"2022.11 18"
            },{
                img:"./img/3.jpg",
                link:"http://ltaaa.com",
                title:"标题5",
                author:"薛一靓",
                time:"2022.11 18"
            }];
            var jlist=document.querySelector(".jlist");
            jarr.forEach((v,i)=>{
                var nli=document.createElement("li");
                nli.innerHTML=`<img src="${v.img}">
                <div class="txt">
                    <h3><a href="${v.link}">${v.title}</a></h3>
                    <span class="author">${v.author}</span>
                    <span class="time">${v.time}</span>
                </div>`;
                jlist.appendChild(nli);
            })
        </script>
    </body>
</html>

    
</body>
</html>